<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" th:include="pages/back/backHome::header"></div>
    <div class="layui-side layui-bg-black" th:include="pages/back/backHome::menu"></div>
    <div class="layui-footer" th:include="pages/back/backHome::footer"></div>
    <div class="layui-body layui-card-body layui-card" style="overflow-y: hidden">
        <div style="display: flex;">
            <div style="width: 30%">
                <form class="layui-form" id="goodsForm" action="/">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品类型</label>
                        <div class="layui-input-block" style="width: 200px">
                            <label>
                                <select name="goodsTypeId" lay-filter="aihao" lay-verify="required">
                                    <option value="" selected="">请选择</option>
                                    <option value="0">写作</option>
                                    <option value="1">阅读</option>
                                    <option value="2">游戏</option>
                                    <option value="3">音乐</option>
                                    <option value="4">旅行</option>
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">商品标题</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input type="text" name="title" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">商品原价</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input type="text" name="oldPrice" class="layui-input" lay-verify="required|number">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">商品现价</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input type="text" name="price" class="layui-input" lay-verify="required|number">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">商品库存</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input type="text" name="count" class="layui-input" lay-verify="required|number">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">商户名称</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input type="text" name="merchantName" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">评价次数</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input type="text" name="evaluationCount" class="layui-input"
                                       lay-verify="required|number">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <label class="layui-form-label">商品图片</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <img id="previewImg"
                                     style="border-radius: 5px;border: solid lightgray 1px;box-shadow: 0 0 5px lightgray;
                                 ;height: 100px;width:
                            80px">
                                <input type="file" name="pic" id="pic" style="display: none">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">是否在售</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="onSale" lay-skin="switch" lay-text="在售|下架">
                        </div>
                    </div>

                    <input type="hidden" id="detail" name="detail"/>

                    <div class="layui-form-item">
                        <div style="text-align: center">
                            <button id="commit" type="button" lay-submit class="layui-btn" lay-filter="goodsForm"
                                    style="background-color:
                            #23262E">
                                添加
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                        </div>
                    </div>
                </form>
            </div>
            <div style="width: 70%;margin-left: 10px;">
                <h3 style="text-align: center">商品详情</h3>
                <div id="wangEdit" style="margin-top: 1%;padding: 20px;width: 95%"></div>
            </div>
        </div>

    </div>
</div>
<script th:src="@{/wangEditor-3.1.1/release/wangEditor.js}" type="text/javascript"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script>
    $(function () {

        layui.use(['element', 'form', 'table', 'layer'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;

            form.on('submit(goodsForm)', function (data) {
                //将文本内容赋值给表单的detail输入框
                let text = editor.txt.html();
                $("#detail").val(text);
                let formData = new FormData(data.form);
                console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}

                $.ajax({
                    url: "/pages/back/goods/add",
                    contentType: false,//默认是表单数据，要传递json字符串就写application/json，文件就用multipart/form-data(有boundary分隔符),两者都有最好是false
                    processData:false,//默认为true,会将数据转换成字符串格式上传，若传输文件则会发生错误
                    data: formData,
                    dataType: 'json',//服务器响应数据：json,text,html.xml
                    type: 'post', //ajax请求方式post,get
                    success: function (resp) { //请求成功后的回调函数
                            layer.msg(resp.msg);
                    }
                });

            });

        });

        //富文本编辑器
        var E = window.wangEditor;
        var editor = new E('#wangEdit');
        //使用base64保存图片
        editor.customConfig.uploadImgShowBase64 = true;
        //使用路径传参
        editor.customConfig.uploadImgParams = true;
        editor.create();

        /*

                //将文本内容赋值给表单的detail输入框
                $("#commit").click(function () {
                    let text = editor.txt.html();
                    $("#detail").val(text);
                });
        */


        //隐藏文件上传按钮后触发文件上传的方法
        $("#previewImg").click(function () {
            $("#pic").click();
        });
        //预览上传的图片
        $("#pic").change(function () {
            let file = this.files[0];
            var objUrl = getObjectURL(file);
            if (objUrl) {
                $("#previewImg").attr("src", objUrl);
            }
        });

    });

    //获得上传的图片的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

</script>
</body>
</html>